<script lang="ts" setup>
import {
    Delete,
    Edit,
} from '@element-plus/icons-vue';
import DefineComponent from "../../utils/App";
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 获取用户的id
import { useUserInfoStore } from '@/store/user.js'
const userInfoStore = useUserInfoStore();
// Token的Store
import { useTokenStore } from '@/store/token.js';
const tokenStore = useTokenStore();
DefineComponent();
// 关于商品的操作

import { GoodUpdService, GoodSelByIdService } from '@/api/Goodinfo.js';


// 商品数据的模型
const Goodinfo = ref([
    {
        id: '1',
        name: "二手自用",
        image: "http",
        category: "2",
        price: 32.0,
        introduction: "aaa",
        status: 0,
        number: 32,
        createTime: "2024-05-18 20:58:58",
        updateTime: "2024-05-18 20:59:01",
        pId: 1,
        statustype: '已通过'
    },
])
//   这里的数据类型对于后端接参好像没有什么影响，可以直接用string类型 ，可以试试
// 修改数据时的数据模型
const GoodModel = ref({
    id: '',
    name: '',
    image: '',        //  提交文件
    category: '',
    price: '',
    introduction: '',
    status: '',       // 状态
    number: '',        // 数量

})

// 查询用户提交历史
const GoodList = async () => {
    console.log('用户id:' + userInfoStore.info.id)

    let result = await GoodSelByIdService(userInfoStore.info.id);

    console.log("返回结果:")
    console.log(result)

    //渲染列表数据
    Goodinfo.value = result.data

    //  修改属性名字   管理员页面需要
    //为列表中添加categoryName属性
    for (let i = 0; i < Goodinfo.value.length; i++) {
        let info = Goodinfo.value[i];
        for (let j = 0; j < Goodinfo.value.length; j++) {
            if (info.status === 0) {
                info.statustype = '待审核'
            } else if (info.status === 1) {
                info.statustype = '已通过'
            } else {
                info.statustype = '已下架'
            }
        }
    }
}

GoodList()

//  修改商品
// 修改弹窗
const dialogUpdVisible = ref(false)

// 展示编辑弹窗 
const showUpdDialog = (row) => {
    dialogUpdVisible.value = true
    // 数据拷贝
    GoodModel.value.id = row.id;
    GoodModel.value.name = row.name;
    GoodModel.value.image = row.image;
    GoodModel.value.category = row.category;
    GoodModel.value.price = row.price;
    GoodModel.value.introduction = row.introduction;
    GoodModel.value.status = row.status;
    GoodModel.value.number = row.number;
    // GoodModel.value.updateTime = row.updateTime;
    // GoodModel.value.pId = row.pId;
}
//  修改商品数据
const UpdGood = async () => {
    console.log('商品信息：')
    console.log(GoodModel.value)
    let result = await GoodUpdService(GoodModel.value)
    console.log('res:')
    console.log(result)

    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '添加成功')
        dialogUpdVisible.value = false
    } else {
        ElMessage.error('添加失败')
    }
    GoodList()
}
import { GoodDelService } from '@/api/Goodinfo.js';
//  删除商品
const DelGood = (row) => {
    var arr = [];
    arr.push(row.id)
    console.log('商品编号：')
    console.log(arr)

    // 提示用户  确认框
    ElMessageBox.confirm(
        '是否要下架该商品?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //  调用删除接口
            let result = await GoodDelService(arr)
            ElMessage({
                type: 'success',
                message: '下架成功',
            })
            // 刷新数据页面
            // 调用获取所有文章分类的函数
            GoodList()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消下架',
            })
        })
}

//  上传成功的回调      
const uploadSuccess = (result) => {
  GoodModel.value.image = result.data
  console.log(result.data);

}
</script>

<template>

    <el-card class="">
        提交历史
        <div style="margin-top: 20px;">
            <hr>
        </div>

        <el-table :data="Goodinfo" style="width: 100%">
            <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                        <p m="t-0 b-2">商品编号: {{ props.row.id }}</p>
                        <p m="t-0 b-2">商品简介: {{ props.row.introduction }}</p>
                        <!-- <p m="t-0 b-2">商品状态: {{ props.row.status }}</p>  -->
                        <p m="t-0 b-2">商品库存: {{ props.row.number }}</p>
                        <p m="t-0 b-2">创建时间: {{ props.row.createTime }}</p>
                        <p m="t-0 b-2">修改时间: {{ props.row.updateTime }}</p>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="商品名称" prop="name" />
            <el-table-column label="图像" prop="image">
                <template #default="{ row }">
                    <img :src=row.image alt="图片走丢了" style="height: 100px" />
                </template>
            </el-table-column>
            <el-table-column label="商品类别" prop="category" />
            <el-table-column label="价格" prop="price" />
            <el-table-column label="商品状态" prop="statustype" />

            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <!-- 修改 -->
                    <el-button type="primary" :icon="Edit" circle @click="showUpdDialog(row)" />
                    <!-- 删除商品 -->
                    <el-button type="danger" :icon="Delete" circle @click="DelGood(row)" />
                </template>
            </el-table-column>
        </el-table>

        <!-- // 修改商品 -->
        <el-dialog v-model="dialogUpdVisible" title="修改商品" width="30%">
            <el-form :model="GoodModel" label-width="100px" style="padding-right: 30px">
                <el-form-item label="商品编号" prop="id">
                    <el-input v-model="GoodModel.id" minlength="1" maxlength="10" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="GoodModel.name" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="image">
                    <el-upload class="goodimg-uploader" :auto-upload="true" :show-file-list="false" action="/api/upload"
                        name="image" :headers="{ 'token': tokenStore.token.token }" :on-success="uploadSuccess">
                        <img v-if="GoodModel.image" :src=GoodModel.image alt="图片走丢了" class="goodimg" title="点击图片可以修改图像" />
                        <el-icon v-else class="goodimg-uploader-icon" title="点击图片可以修改图像">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <!-- <el-text class="mx-1" type="primary">(点击图片可以修改图像) </el-text> -->
                    <!-- <el-input v-model="GoodModel.image" minlength="1" maxlength="15"></el-input> -->
                </el-form-item>
                <el-form-item label="商品类别" prop="category">
                    <el-input v-model="GoodModel.category" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="GoodModel.price" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="introduction">
                    <el-input v-model="GoodModel.introduction" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-input v-model="GoodModel.status" minlength="1" maxlength="15" disabled></el-input>
                </el-form-item>
                <el-form-item label="库存" prop="number">
                    <el-input v-model="GoodModel.number" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <!-- <el-form-item label="修改时间" prop="updateTime">
                    <el-input v-model="GoodModel.updateTime" minlength="1" maxlength="15" disabled></el-input>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogUpdVisible = false">取消</el-button>
                    <el-button type="primary" @click="UpdGood"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>

    </el-card>
</template>



<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-input {
    width: 220px;
}

.el-select {
    width: 220px;
}


.card-header {
    display: flex;
    justify-content: space-between;
}

.goodimg-uploader {
  
  .goodimg {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.goodimg-uploader-icon {
    font-size: 28px;
    color: #242527;
    width: 150px;
    height: 150px;
    text-align: center;
    background-color: #7779733e;
  }

}
</style>